import React from 'react';
import { Link } from 'react-router-dom';
import { ArrowRight, Star, Tag, Filter, MapPin } from 'lucide-react';
export function Hiking() {
  const featuredGear = [{
    id: 'salomon-ultra',
    name: 'Salomon X Ultra 4 Mid GTX',
    category: 'Hiking Boots',
    rating: 4.8,
    price: '$165',
    image: 'https://images.unsplash.com/photo-1542124292-60272943bc2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'osprey-talon',
    name: 'Osprey Talon 22',
    category: 'Backpacks',
    rating: 4.9,
    price: '$130',
    image: 'https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'black-diamond-poles',
    name: 'Black Diamond Distance Z',
    category: 'Trekking Poles',
    rating: 4.7,
    price: '$140',
    image: 'https://images.unsplash.com/photo-1510518119802-a9d716810de2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'garmin-fenix',
    name: 'Garmin Fēnix 7',
    category: 'GPS Watches',
    rating: 4.8,
    price: '$699',
    image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'arcteryx-beta',
    name: "Arc'teryx Beta AR Jacket",
    category: 'Rain Shells',
    rating: 4.9,
    price: '$599',
    image: 'https://images.unsplash.com/photo-1608235375712-be654ace4420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }, {
    id: 'darn-tough-socks',
    name: 'Darn Tough Hiker Boot Sock',
    category: 'Hiking Socks',
    rating: 4.8,
    price: '$24',
    image: 'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80'
  }];
  const trails = [{
    id: 'pct',
    name: 'Pacific Crest Trail',
    location: 'Western United States',
    image: 'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'appalachian',
    name: 'Appalachian Trail',
    location: 'Eastern United States',
    image: 'https://images.unsplash.com/photo-1500964757637-c85e8a162699?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }, {
    id: 'tour-du-mont-blanc',
    name: 'Tour du Mont Blanc',
    location: 'France, Italy, Switzerland',
    image: 'https://images.unsplash.com/photo-1486870591958-9b9d0d1dda99?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80'
  }];
  const categories = ['Footwear', 'Backpacks', 'Clothing', 'Navigation', 'Trekking Poles', 'Hydration', 'First Aid', 'Nutrition'];
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
        <img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80" alt="Trail & Trek" className="absolute w-full h-full object-cover" />
        <div className="absolute inset-0 bg-gradient-to-t from-earth-dark to-transparent"></div>
        <div className="container mx-auto px-4 relative z-10 text-center">
          <h1 className="font-display text-5xl md:text-7xl text-white mb-4 drop-shadow-lg">
            TRAIL & TREK
          </h1>
          <p className="text-xl md:text-2xl text-sand-light mb-8 max-w-3xl mx-auto drop-shadow-md">
            Field-tested hiking and trekking gear for every trail and terrain
          </p>
        </div>
      </section>
      {/* Category Navigation */}
      <section className="py-8 bg-carbon-black sticky top-[73px] z-30">
        <div className="container mx-auto px-4 overflow-x-auto">
          <div className="flex space-x-4">
            {categories.map(category => <a key={category} href={`#${category.toLowerCase().replace(' ', '-')}`} className="whitespace-nowrap px-4 py-2 rounded-full bg-earth-dark hover:bg-outdoor-orange transition-colors">
                {category}
              </a>)}
          </div>
        </div>
      </section>
      {/* Featured Gear */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              TOP-RATED HIKING GEAR
            </h2>
            <div className="flex space-x-4">
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-outdoor-orange transition-colors">
                <Filter size={18} />
                <span>Filter</span>
              </button>
              <button className="flex items-center space-x-2 px-4 py-2 border border-gray-700 rounded-md hover:border-outdoor-orange transition-colors">
                <Tag size={18} />
                <span>Sort</span>
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            {featuredGear.map(item => <Link key={item.id} to={`/review/${item.id}`} className="group">
                <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                  <div className="relative h-64 overflow-hidden">
                    <img src={item.image} alt={item.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                    <div className="absolute top-0 left-0 bg-outdoor-orange px-3 py-1">
                      <span className="font-display text-sm">
                        {item.category}
                      </span>
                    </div>
                  </div>
                  <div className="p-6 flex flex-col flex-grow">
                    <div className="flex items-center mb-2">
                      <div className="flex text-outdoor-orange">
                        {[...Array(5)].map((_, i) => <Star key={i} size={16} className={i < Math.floor(item.rating) ? 'fill-outdoor-orange' : 'text-gray-600'} />)}
                      </div>
                      <span className="ml-2 text-gray-400">{item.rating}</span>
                    </div>
                    <h3 className="font-display text-xl mb-2 group-hover:text-outdoor-orange transition-colors">
                      {item.name}
                    </h3>
                    <div className="mt-auto flex justify-between items-center">
                      <span className="text-lg font-bold">{item.price}</span>
                      <span className="text-outdoor-orange flex items-center">
                        View Details
                        <ArrowRight size={16} className="ml-1 transition-transform group-hover:translate-x-1" />
                      </span>
                    </div>
                  </div>
                </div>
              </Link>)}
          </div>
          <div className="mt-8 text-center">
            <button className="bg-outdoor-orange hover:bg-climbing-red text-white font-display px-8 py-3 rounded transition-colors">
              VIEW ALL HIKING GEAR
            </button>
          </div>
        </div>
      </section>
      {/* Featured Trails */}
      <section className="py-16 bg-carbon-black">
        <div className="container mx-auto px-4">
          <h2 className="font-display text-3xl md:text-4xl mb-8">
            ICONIC TRAILS
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {trails.map(trail => <div key={trail.id} className="group relative h-80 overflow-hidden rounded-lg">
                <img src={trail.image} alt={trail.name} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                <div className="absolute inset-0 bg-gradient-to-t from-carbon-black to-transparent"></div>
                <div className="absolute bottom-0 left-0 p-6">
                  <h3 className="font-display text-2xl text-white mb-1">
                    {trail.name}
                  </h3>
                  <div className="flex items-center text-gray-300 mb-4">
                    <MapPin size={16} className="mr-1" />
                    <span>{trail.location}</span>
                  </div>
                  <Link to={`/trails/${trail.id}`} className="inline-flex items-center text-outdoor-orange">
                    <span className="mr-1">Trail Guide</span>
                    <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
                  </Link>
                </div>
              </div>)}
          </div>
        </div>
      </section>
      {/* Hiking Guides */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col md:flex-row justify-between items-center mb-8">
            <h2 className="font-display text-3xl md:text-4xl mb-4 md:mb-0">
              HIKING GUIDES & RESOURCES
            </h2>
            <Link to="/guides" className="flex items-center text-outdoor-orange hover:text-climbing-red transition-colors">
              <span className="mr-2 font-display">VIEW ALL GUIDES</span>
              <ArrowRight size={20} />
            </Link>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <Link to="/guides/hiking-boots" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1542124292-60272943bc2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Hiking Boots Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">12 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                    How to Choose Your First Hiking Boots
                  </h3>
                  <p className="text-gray-300">
                    Finding the perfect pair of hiking boots can mean the
                    difference between an enjoyable trek and a painful ordeal.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/layering" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1521038199265-bc482db0f923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Layering Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">15 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                    The Art of Layering for Outdoor Adventures
                  </h3>
                  <p className="text-gray-300">
                    Master the science of staying comfortable in any weather
                    condition with our comprehensive guide to layering systems.
                  </p>
                </div>
              </div>
            </Link>
            <Link to="/guides/ultralight-packing" className="group">
              <div className="bg-carbon-black rounded-lg overflow-hidden h-full flex flex-col">
                <div className="relative h-48 overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80" alt="Ultralight Packing Guide" className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                </div>
                <div className="p-6 flex-grow">
                  <div className="mb-2 text-sm text-gray-400">18 min read</div>
                  <h3 className="font-display text-xl mb-3 group-hover:text-outdoor-orange transition-colors">
                    Ultralight Backpacking: A Complete Guide
                  </h3>
                  <p className="text-gray-300">
                    Learn how to reduce pack weight without sacrificing comfort
                    or safety for long-distance hiking adventures.
                  </p>
                </div>
              </div>
            </Link>
          </div>
        </div>
      </section>
    </div>;
}